<template>
    <div class="default-main">
        <div>
            <span class="demonstration">起始日期</span>
            <el-date-picker
                v-model="sync_request_body.start_date_str"
                type="date"
                placeholder="起始日期"
                value-format="YYYY-MM-DD"
            />

            <span class="demonstration">结束日期</span>
            <el-date-picker
                v-model="sync_request_body.end_date_str"
                type="date"
                placeholder="结束日期"
                value-format="YYYY-MM-DD"
            />
            <el-button type="primary" @click="handleSync">同步</el-button>
        </div>
        <div>
            <span class="demonstration">起始日期</span>
            <el-date-picker
                v-model="query_params.start_date"
                type="date"
                placeholder="起始日期"
                value-format="YYYY-MM-DD"
            />

            <span class="demonstration">结束日期</span>
            <el-date-picker
                v-model="query_params.end_date"
                type="date"
                placeholder="结束日期"
                value-format="YYYY-MM-DD"
            />
            <el-button type="primary" @click="get_fuguo_data">查询</el-button>
        </div>
        <div style="height: 350px;width: 100%;">
            <VChart :option="chart_bizhi_option" class="chart" style="height: 100%;width: 100%;"  />
        </div>
        <div style="height: 350px;width: 100%;">
            <VChart :option="chart_option" class="chart" style="height: 100%;width: 100%;"  />
        </div>
    </div>
</template>
<script setup>
import { ref,reactive } from 'vue'
import {callBackApi} from '../../../api'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { LineChart } from 'echarts/charts';
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 第三方组件模块
import VChart from 'vue-echarts';
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
const sync_request_body = reactive(
    {
        start_date_str: "",
        end_date_str: "",
    }
)
const query_params = reactive({
    start_date: "",
    end_date: "",
})
const chart_bizhi_option = reactive({
    title: {
        text: '认沽持仓/认购持仓比值'
    },
    tooltip: {
        trigger: 'axis'
    },
    feature: {
      saveAsImage: {}
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: []
})
const chart_option = reactive({
    title: {
        text: '富国交易量'
    },
    tooltip: {
        trigger: 'axis'
    },
    feature: {
      saveAsImage: {}
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: []
})
const handleSync = async () => {
    let request_body = {
        start_date_str: sync_request_body.start_date_str,
        end_date_str: sync_request_body.end_date_str,
    }
    let res = await callBackApi(
        "shares/syncData/",
        request_body,
        {loading:true,showSuccessMessage:true},
        {
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)'
        }
    );
    console.log(res)
}

const get_fuguo_data = async () => {
    let request_body = {
        start_date: query_params.start_date,
        end_date: query_params.end_date,
    }
    let res = await callBackApi(
        "shares/fuguoEchart/",
        request_body,
        {loading:true,showSuccessMessage:true},
        {
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)'
        }
    );

    chart_option.xAxis.data = res.xAxis_data
    chart_option.series = res.series_data
    chart_bizhi_option.xAxis.data = res.xAxis_data
    chart_bizhi_option.series = res.series_bizhu_data

}

</script>